<template>
	<view class="content">
		<u--form :model="form" ref="uForm" :borderBottom="true" labelPosition="top" labelWidth="300">
			<u-form-item :borderBottom="true" label="卡号" prop="bank_card">
				<u-input border="none" v-model="form.bank_card" placeholder="请输入卡号" />
				<view slot="right" @click="selectImg2('bank_image')">
					<u-icon name="camera-fill" color="#c1c1c1" size="56"></u-icon>
				</view>
			</u-form-item>
			<u-form-item :borderBottom="true" label="开户行" prop="kaihu" @click="khh.typeShow=true">
				<u-input border="none" readonly v-model="form.kaihu" type="select" 
					placeholder="请输入开户行" />
			</u-form-item>
			<u-form-item :borderBottom="true" label="银行预留手机号" prop="mobile">
				<u-input border="none" v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
		</u--form>
		<view style="margin: 40rpx 0;">
			<u-button shape="circle" color="linear-gradient(to left, #e44e15, #f4aa56)" text='提交' @click="submit">
			</u-button>
		</view>
		<!-- 开户行 -->
		<u-picker :show="khh.typeShow" title="选择开户行" :singleIndex="khh.defaultIndex[0]" :closeOnClickOverlay="true" visibleItemCount="16"
			@cancel="playCancel" :columns="[khh.typeList]" @confirm="khhConfirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		areaId
	} from '../../common/http.api.js'
	import {banks,bankcardUpdate, bankcardAdd} from '../../common/bankcard.api.js'
	export default {
		data() {
			return {
				deCode: '',
				globalData: [],
				form: {
					bank_card: '',
					kaihu: '',
					bank_id: '',
					city1: '',
					province: '',
					mobile: '',
					type: '00'
				},
				khh: {
					typeShow: false,
					typeList: [],
					typeName: '',
					typeVlaue: [0],
					defaultIndex: [0]
				},
				rules: {
					bank_card: [{
						type: 'number',
						required: true,
						message: '请输入正确的银行卡号',
						// 可以单个或者同时写两个触发验证方式 
						// trigger: ['change', 'blur'],
					}],
					kaihu: [{
						required: true,
						message: '请选择开户行',
						// 可以单个或者同时写两个触发验证方式 
						// trigger: ['change', 'blur'],
					}],
					mobile: [{
						type: 'number',
						required: true,
						message: '请输入正确手机号',
						// 可以单个或者同时写两个触发验证方式 
						// trigger: ['change'],
					}],
				},
				areaList: [],
				source:null
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.globalData = getApp().globalData
		},
		onLoad(option) {
			if (JSON.stringify(option) != "{}" && option.deCode) {
				uni.setNavigationBarTitle({
					title: '编辑储蓄卡'
				})
				let deCode = JSON.parse(option.deCode);
				this.deCode = JSON.parse(option.deCode)
				
				console.log(deCode)
				
				this.form.bank_card = deCode.full_card_number;
				this.khh.typeVlaue = []
				this.khh.typeVlaue.push(deCode.banks_id);
				this.form.kaihu = deCode.name
				this.form.mobile = deCode.mobile
				this.form.bank_id = deCode.banks_id
			}
			this.source = option.source
			// this.getAreaList()
			this.getBanks()

		},
		methods: {
			selectImg2(e) {
				let _self = this;
				let token = uni.getStorageSync('token')
				uni.chooseImage({
					count: 1, //默认9
					type: 'image', //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '加载中'
						})
						uni.uploadFile({
							url: _self.globalData.APP_API_BASE_URI + '/api/user/ocr/bank',
							filePath: res.tempFilePaths[0],
							name: 'bank_image',
							formData: {
								'token': token,
							},
							header: {
								"Content-Type": "multipart/form-data",
								"token": token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								uni.hideLoading()
								if (data.status == "failed") {
									uni.showToast({
										title: data.failedMsg,
										icon: 'none'
									})
								} else {
									_self.form.bank_card = data.data.bank_card_number
			
								}
							},
							fail: (e) => {
			
							}
						});
					}
				});
			},
			// 获取银行列表banks
			getBanks() {
				banks().then(res => {
					for(let i = 0; i < res.length; i++){
						this.khh.typeList.push(res[i].name)
						//xiugai 
						if(this.deCode){
							if(this.form.kaihu == res[i].name){
								this.khh.defaultIndex = [i]
							}
						}
					}
					this.kaihuList = res
				})
			},
			
			// 开户行选择
			khhConfirm(e) {
				this.khh.typeShow = false;
				this.form.kaihu = this.khh.typeList[e.indexs[0]]
				this.form.bank_id = this.kaihuList[e.indexs[0]].id
				this.khh.typeVlaue = [e.indexs[0]]
			},

			playCancel() {
				this.khh.typeShow = false;
			},
			submit() {
				uni.showLoading({
					title: '提交中...'
				})
				let params = this.form;
				this.$refs.uForm.validate().then(res => {
					if (this.deCode) {
						params.id = this.deCode.id;
						bankcardUpdate(params).then(res => {
							uni.hideLoading()
							uni.$emit('updateBankCardInfo',{type:'00'})
							uni.$u.toast('修改成功')
						})
					} else {
						bankcardAdd(params).then(res => {
							uni.hideLoading()
							uni.$emit('updateBankCardInfo',{type:'00'})
							uni.showLoading({
								title:"添加成功",
								complete: function() {
									uni.$u.route({
										url: 'pages/bankcard/index'
									})
								}
							})
						})
					}
					
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast('请检查填写内容')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 30rpx;
		padding-bottom: 50rpx;
	}
</style>
